<template>
  <div class="app-container">
    <el-card>
      <div slot="header">
        <span>评论详情</span>
        <el-button style="float: right;" @click="goToList">返回列表</el-button>
      </div>
      <el-form ref="form" :model="form" label-width="100px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="评论ID：">
              {{ form.commentId }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="评论人：">
              {{ form.userName }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="IP地址：">
              {{ form.userIp }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="评论时间：">
              {{ parseTime(form.createTime) }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="状态：">
              <el-tag v-if="form.status === '0'" type="success">显示</el-tag>
              <el-tag v-else type="danger">隐藏</el-tag>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="评论内容：">
          <el-input
            type="textarea"
            :rows="6"
            placeholder="请输入内容"
            v-model="form.content"
            :disabled="true">
          </el-input>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { getComment } from "@/api/cms/comment";

export default {
  name: "CommentDetail",
  data() {
    return {
      // 表单参数
      form: {}
    };
  },
  created() {
    const commentId = this.$route.params.commentId;
    this.getCommentInfo(commentId);
  },
  methods: {
    /** 获取评论详情 */
    getCommentInfo(commentId) {
      getComment(commentId).then(response => {
        this.form = response.data;
      });
    },
    /** 返回列表 */
    goToList() {
      this.$router.push('/cms/comment');
    }
  }
};
</script>